<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Report Player Sample (Laci)</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://laci2.esri.com/jenkins/job/report-player-jsapi-3.18-pr/lastSuccessfulBuild/artifact/build/report-player/release/reportPlayer/esri.css">
    <script src="https://laci2.esri.com/jenkins/job/report-player-jsapi-3.18-pr/lastSuccessfulBuild/artifact/build/report-player/release/reportPlayer/config.js"></script>
    <script data-dojo-config="baseUrl: 'https://laci2.esri.com/jenkins/job/report-player-jsapi-3.18-pr/lastSuccessfulBuild/artifact/build/report-player/release', isDebug: 1, waitSeconds: 60" src="https://laci2.esri.com/jenkins/job/report-player-jsapi-3.18-pr/lastSuccessfulBuild/artifact/build/report-player/release/reportPlayer/main.js"></script>

    <style>
        html, body, #layoutNode {
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
            font-size: 13px;
            font-family: "Avenir Next";
        }
    </style>

    <script>

        require([
            "dojo/when",

            "dojo/dom-construct",
            "dojo/dom-style",
            "dojo/on",

            "esri/arcgis/OAuthInfo",
            "esri/IdentityManager",
            "esri/config",

            "esri/dijit/geoenrichment/ReportPlayer/ReportPlayer",
            "esri/dijit/geoenrichment/ReportPlayer/PlayerResizeModes",
            "esri/dijit/geoenrichment/ReportPlayer/PlayerThemes",
            "esri/dijit/geoenrichment/ReportPlayer/dataProviders/DataProviderGE",
            "esri/dijit/geoenrichment/ReportPlayer/dataProviders/supportClasses/AnalysisAreaJsonUtil",
            "esri/dijit/geoenrichment/ReportPlayer/dataProviders/commands/supportClasses/PlayerCommands",
            "esri/dijit/geoenrichment/utils/UrlUtil",

            "dojo/domReady!"
        ],
       function (
           when,

           domConstruct,
           domStyle,
           on,

           ArcGISOAuthInfo,
           esriId,
           esriConfig,

           ReportPlayer,
           PlayerResizeModes,
           PlayerThemes,
           DataProviderGE,
           AnalysisAreaJsonUtil,
           PlayerCommands,
           UrlUtil
           ) {

           /*

           INFO:

           URL query parameters (case insensitive):
               appId - Application ID.
               portalUrl - URL of the ArcGIS Portal.
               geoenrichmentUrl - URL of the Geoenrichment server.
               countryID - 2 charachter id of the country the report template data belongs to (e.g. US).
               reportID - ID of the report template portal item.
               proxy - URL of the proxy. Needed for printing and exporting the infographic when external resources need to be accessed (e.g. when printing a map).
               analysisAreas - array of anaysis areas in json format (see DataProviderGE.js for more details about the format).
               slidesView - true/false. Pass true if you want the player to be viewed as a pagination. Default false.
               theme - "light", "dark". Default is "dark"

               Example:

               Case 1: Feature with geometry

               .../ReportPlayerLocal.html?appId=2MG0ExU62MhFwQKB&portalUrl=https://www.arcgis.com&geoenrichmentUrl=https://geoenrich.arcgis.com/arcgis/rest/services/World/geoenrichmentserver&countryID=US&reportID=d87ca044fc9a4f488bc6807389e3f029&analysisAreas=[{"name":"Area name","shortName":"Area from url (short)","description":"Area description","address":"Area address","latitude":"Area Lat.","longitude":"Area Long.","feature":{"geometry":{"rings":[[[-10800107.01591563,3862641.714572819],[-10716918.351420047,4636712.237704219],[-9901669.439363334,4969050.952364072],[-9909988.305812893,4278585.037050734],[-10800107.01591563,3862641.714572819]]],"spatialReference":{"wkid":102100}},"attributes":{},"symbol":{"color":[200,50,50,50],"outline":{"color":[255,0,0,255],"width":1.5,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"}}}]&slidesView=false

               OR

               Case 2: only geography ids

               .../ReportPlayerLocal.html?appId=2MG0ExU62MhFwQKB&portalUrl=https://www.arcgis.com&geoenrichmentUrl=https://geoenrich.arcgis.com/arcgis/rest/services/World/geoenrichmentserver&countryID=US&reportID=d87ca044fc9a4f488bc6807389e3f029&analysisAreas=[{"name":"Area name","shortName":"Area from url (short)","description":"Area description","address":"Area address","latitude":"Area Lat.","longitude":"Area Long.", "geographies": [{"id":"32","levelId":"US.States"},{"id":"06","levelId":"US.States"}]}]&slidesView=false
           */

           /* test: currently is referencing a report template from the content of user akolomeets. */

           var DEFAULTS = {
               appId: "2MG0ExU62MhFwQKB",
               portalUrl: "https://www.arcgis.com",
               geoenrichmentUrl: "https://geoenrich.arcgis.com/arcgis/rest/services/World/geoenrichmentserver",
               countryID: "US",
               reportID: "d87ca044fc9a4f488bc6807389e3f029",
               slidesView: false,
               theme: PlayerThemes.DARK,

               // Case 1: Feature with geometry

               analysisAreas: [
                        {
                            "name": "Area name",
                            "shortName": "Area name (short)",
                            "description": "Area description",
                            "address": "Area address",
                            "latitude": "Area Lat.",
                            "longitude": "Area Long.",
                            "feature": {
                                "geometry": {
                                    "rings": [
                                        [
                                            [
                                                -10800107.01591563,
                                                3862641.714572819
                                            ],
                                            [
                                                -10716918.351420047,
                                                4636712.237704219
                                            ],
                                            [
                                                -9901669.439363334,
                                                4969050.952364072
                                            ],
                                            [
                                                -9909988.305812893,
                                                4278585.037050734
                                            ],
                                            [
                                                -10800107.01591563,
                                                3862641.714572819
                                            ]
                                        ]
                                    ],
                                    "spatialReference": {
                                        "wkid": 102100
                                    }
                                },
                                "attributes": {},
                                "symbol": {
                                    "color": [
                                        200,
                                        50,
                                        50,
                                        50
                                    ],
                                    "outline": {
                                        "color": [
                                            255,
                                            0,
                                            0,
                                            255
                                        ],
                                        "width": 1.5,
                                        "type": "esriSLS",
                                        "style": "esriSLSSolid"
                                    },
                                    "type": "esriSFS",
                                    "style": "esriSFSSolid"
                                }
                            }
                        },
                        {
                            "name": "Area name 2",
                            "shortName": "Area name 2 (short)",
                            "description": "Area description 2",
                            "address": "Area address 2",
                            "latitude": "Area Lat. 2",
                            "longitude": "Area Long. 2",
                            "feature": {
                                "geometry": {
                                    "rings": [
                                        [
                                            [
                                                -10800107.01591563,
                                                3962641.714572819
                                            ],
                                            [
                                                -10716918.351420047,
                                                4536712.237704219
                                            ],
                                            [
                                                -9901669.439363334,
                                                4769050.952364072
                                            ],
                                            [
                                                -9909988.305812893,
                                                4078585.037050734
                                            ],
                                            [
                                                -10800107.01591563,
                                                3962641.714572819
                                            ]
                                        ]
                                    ],
                                    "spatialReference": {
                                        "wkid": 102100
                                    }
                                },
                                "attributes": {},
                                "symbol": {
                                    "color": [
                                        50,
                                        50,
                                        200,
                                        50
                                    ],
                                    "outline": {
                                        "color": [
                                            0,
                                            0,
                                            255,
                                            255
                                        ],
                                        "width": 1.5,
                                        "type": "esriSLS",
                                        "style": "esriSLSSolid"
                                    },
                                    "type": "esriSFS",
                                    "style": "esriSFSSolid"
                                }
                            }
                        }
               ],

               // Case 2: only geography ids

               analysisAreasWithGeographiesOnly: [
                        {
                            "name": "Area name",
                            "shortName": "Area name (short)",
                            "description": "Area description",
                            "address": "Area address",
                            "latitude": "Area Lat.",
                            "longitude": "Area Long.",
                            "geographies": [
                                { "id": "32", "levelId": "US.States" },
                                { "id": "06", "levelId": "US.States" }
                            ]
                        }
               ]
           };

           /*
           // override defaults
           DEFAULTS.portalUrl = "https://qaext.arcgis.com";
           DEFAULTS.geoenrichmentUrl = "http://ec2-52-21-196-36.compute-1.amazonaws.com/arcgis/rest/services/World/GeoEnrichmentServer";
           DEFAULTS.reportID = "b5bf933e2ba04ddb89da3cadb9c29c14";
           DEFAULTS.appId = "gzYR5C8WR8c0aRCH";
           */

           function getUrlVar(name) {
               var href = window.location.href;
               return UrlUtil.getVariableValue(href, name) || DEFAULTS[name];
           };

           // parse url query parameters

           var appId = getUrlVar("appId");
           var portalUrl = getUrlVar("portalUrl");
           var geoenrichmentUrl = getUrlVar("geoenrichmentUrl");
           var countryID = getUrlVar("countryID");
           var reportID = getUrlVar("reportID");
           var analysisAreasJson = getUrlVar("analysisAreas");
           if (typeof analysisAreasJson === "string")
               analysisAreasJson = JSON.parse(analysisAreasJson);
           var isSlidesView = getUrlVar("slidesView") === "true";
           var theme = getUrlVar("theme");

           esriConfig.defaults.io.proxyUrl = getUrlVar("proxy") || null;

           //--------------------------------------------------------------------------
           //
           //  Methods: sing-in
           //
           //--------------------------------------------------------------------------

           var SignInHelper = {
               signIn: function (callback) {
                   var info = new ArcGISOAuthInfo({
                       appId: appId,
                       portalUrl: portalUrl,
                       popup: false
                   });
                   esriId.registerOAuthInfos([info]);
                   esriId.checkSignInStatus(info.portalUrl).then(
                      function () {
                          callback();
                      }).otherwise(
                       function () {
                           // user will be shown the OAuth Sign In page
                           esriId.getCredential(info.portalUrl, {
                               oAuthPopupConfirmation: false
                           }).then(function () {
                               callback();
                           });
                       });
               }
           };

           //--------------------------------------------------------------------------
           //
           //  Methods: run player
           //
           //--------------------------------------------------------------------------

           SignInHelper.signIn(function () {

               var dataProvider = new DataProviderGE();
               dataProvider.registerCommand(PlayerCommands.PDF, "PDF");
               dataProvider.registerCommand(PlayerCommands.HTML, "HTML");
               dataProvider.registerCommand(PlayerCommands.PRINT, "Print");

               var player = new ReportPlayer({
                   config: {
                       esriDijitCssUrl: "https://js.arcgis.com/3.18/dijit/themes/claro/claro.css",
                       playerSourceRootUrl: "https://la.arcgis.com/ReportPlayer/1.0.0"
                   },
                   isSlidesView: isSlidesView,
                   theme: theme,
                   dataProvider: dataProvider,
                   resizeMode: PlayerResizeModes.FIT_WINDOW
               }).placeAt(playerDiv);

               var params = {
                   portalUrl: portalUrl,
                   geoenrichmentUrl: geoenrichmentUrl,
                   countryID: countryID,
                   reportID: reportID,
                   analysisAreas: AnalysisAreaJsonUtil.areasFromJson(analysisAreasJson)
               };

               when(player.playReport(params, { waitUntilAllContentIsReady: true }), function () {

                   // The content is ready, you can call export commands
                   // 3 cases:
                   // returnAsHtmlText = true => HTML text will be returend.
                   // returnAsSvgText = true => Array of SVG strings will be retured.
                   // Both are false => HTML file will be downloaded.

                   /*
                   when(player.executeCommand(PlayerCommands.HTML, {
                       returnAsHtmlText: false,
                       returnAsSvgText: false
                   }), function (htmlText) {
                       console.log(htmlText);
                   });
                   */
               });
           });
       });
    </script>
</head>
<body class="claro">
    <div id="playerDiv"></div>
</body>
</html>